<template>
  <div class="w h over-h">
    <div class="category-title a-i-c f-s dialog-page-title">
      <el-button type='text' icon="ArrowLeft" @click="goBackToPage">返回</el-button>
      <div class="m-l10">
        项目创建
      </div>
    </div>
    <div class="w f-c a-i-c" :style="normalBodyHeight">
      <div class="w box-b p10">
        <el-steps :active="createdStep" finish-status="success" simple>
          <el-step title="选择类型" />
          <el-step title="提交信息" />
          <!-- <el-step title="完成" /> -->
        </el-steps>
        <div v-if="createdStep==0">
          <div class="w f-b m-t10 project-type">
            <mark-type v-model="projectType" @click="createdStep=1"></mark-type>
            <!-- <div class="select-box" @click="projectType=0;createdStep=1"
              :class="{'select-box-on':projectType==0}">
              <div class="image box-b" style="width:220px;height:120px">
                <img src="@/assets/project/tuxiangjiance.png" class="w" />
              </div>
              <div class="w t-c title">图像检测</div>
            </div>
            <div class="select-box" @click="projectType=1;createdStep=1"
              :class="{'select-box-on':projectType==1}">
              <div class="image box-b" style="width:220px;height:120px">
                <img src="@/assets/project/tuxiangfenglei.png" class="w" />
              </div>
              <div class="w t-c title">图像分类</div>
            </div>
            <div class="select-box" @click="projectType=2;createdStep=1"
              :class="{'select-box-on':projectType==2}">
              <div class="image box-b" style="width:220px;height:120px">
                <img src="@/assets/project/tuxiangqiege.png" class="w" />
              </div>
              <div class="w t-c title">图像分割</div>
            </div> -->
          </div>
        </div>

        <template v-else>
          <div class="m-t10">
            <lm-form :ref="editFormRefKey" inline label-width="140px" class="lm-w lm-h"
              :layout="editFromLayout" v-model="editForm">
              <template #chooseDirectory>
                <div class="w box-b" style="position:relative">
                  <el-input placeholder="点击选择目录并上传图片" v-model="editForm['chooseDirectory']"></el-input>
                  <input type="file" @change="chooseFileChange" webkitdirectory class="w h"
                    style="position:absolute;top:0px;left:0px;opacity: 0;" />
                </div>
              </template>
            </lm-form>
            <div class="lm-w lm-h lm-f-s">
              <div class="lm-w-120 lm-h"></div>
              <el-button type="primary" @click="submit">提交</el-button>
              <el-button type="danger" @click="reset" plain>重置</el-button>
              <el-button type="primary" @click="goBackToPage()" plain>返回</el-button>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import frameProperty from '@/mixins/frame-property'
import { Role, type RoleInfo } from '@/apis/role/index'
import { RequestCode } from '@/server/base'
import { ValidateFieldsError } from 'async-validator'
import markType from '../components/mark-type.vue'

export default {
  name: 'RoleEdit',
  mixins: [frameProperty],
  props: {
    goBackToPage: Function,
    params: [Object, Array]
  } as any,
  components: { markType },
  data() {
    return {
      createdStep: 0,
      projectType: 0,

      editFormRefKey: 'roleModifyRef',
      menuTree: [],
      editForm: {} as {} | RoleInfo | any,
      editFromLayout: [
        {
          prop: 'name',
          label: '项目名称',
          type: 'input',
          itemClass: 'column_1',
          message: '请输入2-20个字符',
          required: true,
          clearable: true,
          regex: /^.{0,20}$/
        },
        {
          prop: 'collectionPath',
          label: '数据集导入途径',
          type: 'input',
          itemClass: 'column_1',
          message: '请输入2-20个字符',
          required: true,
          clearable: true,
          regex: /^.{0,20}$/
        },
        // {
        //   prop: 'collectionPath',
        //   label: '数据集导入途径',
        //   type: 'input',
        //   itemClass: 'column_1',
        //   message: '请输入2-20个字符',
        //   required: true,
        //   clearable: true,
        //   regex: /^.{0,20}$/
        // },
        {
          prop: 'chooseDirectory',
          label: '选择文件夹',
          type: 'slot',
          itemClass: 'column_1',
          message: '请输入2-20个字符',
          // required: true,
          clearable: true,
          regex: /^.{0,20}$/
        },
        {
          prop: 'isClear',
          label: '是否需要数据清洗',
          type: 'radio',
          itemClass: 'column_1',
          message: '请输入2-20个字符',
          clearable: true,
          required: true,
          options: [
            { label: '是', value: '0' },
            { label: '否', value: '1' }
          ],
          linkage(val: string, form: any, item: any, layout: any) {
            return {
              dimensionType: {
                disabled: val == '0',
                required: val == '1'
              }
            }
          }
        },
        {
          prop: 'dimensionType',
          label: '标注类型',
          type: 'radio',
          itemClass: 'column_1',
          required: true,
          message: '请输入2-20个字符',
          clearable: true,
          options: [
            { label: '手动标注', value: '0' },
            { label: '半自动标注', value: '1' }
          ]
        },
        {
          prop: 'annotationFormat',
          label: '标注格式',
          type: 'radio',
          itemClass: 'column_1',
          message: '请输入2-20个字符',
          clearable: true,
          options: [
            { label: 'YOLO格式', value: '0' },
            { label: 'VOC格式', value: '1' },
            { label: 'COCO格式', value: '2' }
          ]
        }
      ] as any[]
    }
  },
  computed: {
    modifyInfo() {
      let row = this.params.row || {}
      return row
    }
  },
  methods: {
    /**
     * 选择文件并上传
     */
    chooseFileChange(e: any) {
      console.log(e)
      debugger
    },
    getDataList() {},
    getDetailById() {
      if (!this.modifyInfo) {
        return
      }
      this.editForm = this.modifyInfo
    },
    saveRoleInfo() {
      const { label, customLabel, hidden, width, handler, elIcon, ...params } = this.editForm
      params.meta = this.metaString
      const method = this.params.isEdit ? Role.modifyRoleInfo : Role.addRoleInfo
      method(params)
        .then((res: RequestCode) => {
          this.showMessage({ type: 'success', message: '操作成功！' })
          this.goBackToPage(true)
        })
        .catch((error: any) => {})
    },
    //验证数据
    submit() {
      const editFormRef = this.$refs[this.editFormRefKey] as any
      editFormRef.validate((isValid: boolean, invalidFields?: ValidateFieldsError) => {
        if (!isValid) {
          //滚动到未通过校验的字段
          if (invalidFields && Object.keys(invalidFields).length > 0) {
            editFormRef.scrollToField(Object.keys(invalidFields)[0])
          }
          return
        }
        this.saveRoleInfo()
      })
    },
    //重置
    reset() {
      this.editForm = {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.getDetailById()
      this.getDataList()
    })
  }
}
</script>

<style scoped lang="scss">
</style>